<template>
  <el-dialog
    custom-class="custom-class"
    fullscreen
    :visible.sync="visible"
    :show-close="false"
    :before-close="handleClose">
    <template v-slot:title>
      <div class="header">
        <div class="left" @click="handleClose">
          <i class="el-icon-back"></i>
          <span>新建新建新建</span>
        </div>
        <div class="right">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleSave">保 存</el-button>
        </div>
      </div>
    </template>
    <ul>
      <li
        style="line-height: 20px"
        v-for="item in navList"
        :key="item.id"
        @click="clickItem(item.id)">
        <div>{{ item.name }}</div>
      </li>
    </ul>

    <div style="height: 500px;background: #42b983" v-for="(item) in navList" :key="item.id" :id=" 'id'+item.id">
      {{ item.name }}
    </div>
  </el-dialog>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component({})
export default class EditDialog extends Vue {
  @Prop({ required: false, default: false }) visible: boolean | undefined;

  navList = [
    { id: 1, name: 'one' },
    { id: 2, name: 'two' },
    { id: 3, name: 'three' },
    { id: 4, name: 'four' },
    { id: 5, name: 'five' },
    { id: 6, name: 'six' },
    { id: 7, name: 'seven' }
  ]

  clickItem (id: number) {
    document.getElementById(`id${id}`)?.scrollIntoView(true)
  }

  handleClose () {
    console.log('handleClose')
    this.$emit('update:visible', false)
  }

  handleSave () {
    console.log('handleSave')
    this.handleClose()
  }
}
</script>

<style lang="scss">
.custom-class {
  background: #E9EEF2 !important;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  .el-dialog__header {
    background: #fff;
    padding: 20px !important;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        cursor: pointer;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        i {
          font-size: 30px;
        }

        span {
          font-size: 20px;
        }
      }
    }

  }

  .el-dialog__body {
    margin: 20px 150px;
    padding: 0;
    background: #fff;
    flex: 1;
    overflow-y: scroll;
  }
}
</style>
